<template>
  <div id="myLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const props = defineProps({
  listData: {
    required: true,
    type: Array,
    default: []
  }
})
const { listData } = toRefs(props)

onMounted(() => {
  watch(()=>props.listData,()=>{
    const xAxisArr = ref([])
    const countryArr = ref([])
    const provinceArr = ref([])
    xAxisArr.value = listData.value.map(item=>{return item.activityYears})
    countryArr.value = listData.value.map(item=>{return item.countryActivityNum})
    provinceArr.value = listData.value.map(item=>{return item.provinceActivityNum})
    
    // 需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(document.getElementById("myLineChart"));
    // 绘制图表
    myChart.setOption({
      color: ['#46FFFF', '#FF2525'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        containLabel: true
      },
      // 标注
      legend: {
        data: ['国家级', '省级'],
        top: 20,
        right: 6,
        textStyle: {
          color: "#fff",
          padding:[0,4]//文字与图形之间的左右间距
        },
      },
      // x轴
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: xAxisArr.value,
        // x轴样式
        axisLine: {
          lineStyle: {
            color: '#30374A',
            show: false,
          }
        },
        //x轴文字的配置
        axisLabel: {
          textStyle: {
            color:' #fff',
          },
        },
      },
      // y轴
      yAxis:{
        type:'value',
        min: 0,
        // max: 20,
        // y轴样式
        axisLine: {
          show: false,
          lineStyle: {
            color: 'transparent'
          }
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color:'rgba(255,255,255,0.5)',
          },
        },
        // 背景线条
        splitLine: {
          lineStyle: {
            color: 'rgba(71,90,219,0.5)',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: "国家级",
          type: "line",
          data: countryArr.value,
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 6, //折线点的大小
          itemStyle : { 
              normal : { 
                  color:'#46FFFF', //改变折线点的颜色
                  lineStyle:{ 
                      color:'#46FFFF', //改变折线颜色
                      width:1,//改变粗细  
                  } 
              } 
          },
        },
        {
          name: "省级",
          type: "line",
          data: provinceArr.value,
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 6, //折线点的大小
          itemStyle : { 
              normal : { 
                  color:'#FF2525', //改变折线点的颜色
                  lineStyle:{ 
                      color:'#FF2525', //改变折线颜色
                      width:1,//改变粗细  
                  } 
              } 
          },
        },
      ],
      // 刻度线
      axisTick: {
          show: false,
          length: 0,
          lineStyle: {
              color:'transparent',
              type: 'solid',
              width: 1
          },
          alignWithLabel: false 
      },
    });
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
  }, { deep: true, immediate: true })
})

</script>
<style lang='scss' scoped>
#myLineChart{
  width: 410px;
  height: 205px;
  margin: -10px auto 0;
  font-size: 14px;
}
</style>